import React,{com} from 'react';
import PropTypes from 'prop-types';
import {Avatar, Dropdown, Icon, Layout, Menu, message, Spin, Tag} from 'antd';
import DocumentTitle from 'react-document-title';
import {connect} from 'dva';
import {Link, Redirect, Route, Switch} from 'dva/router';
import moment from 'moment';
import groupBy from 'lodash/groupBy';
import {ContainerQuery} from 'react-container-query';
import classNames from 'classnames';
import styles from './BasicLayout.less';
import GlobalFooter from '../components/GlobalFooter';
import {getNavData} from '../common/nav';
import {getRouteData} from '../utils/utils';

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

export default class CustomSider extends React.PureComponent {
    render(){
        return (
            <Sider
                trigger={null}
                collapsible
                collapsed={collapsed}
                breakpoint="md"
                onCollapse={this.onCollapse}
                width={256}
                className={styles.sider}
            >
                <div className={styles.logo}>
                    <Link to="/">
                        <img src="https://gw.alipayobjects.com/zos/rmsportal/iwWyPinUoseUxIAeElSx.svg" alt="logo" />
                        <h1>小卷尺零工后台</h1>
                    </Link>
                </div>
                <Menu
                    theme="dark"
                    mode="inline"
                    {...menuProps}
                    onOpenChange={this.handleOpenChange}
                    selectedKeys={this.getCurrentMenuSelectedKeys()}
                    style={{ margin: '16px 0', width: '100%' }}
                >
                    {this.getNavMenuItems(this.menus)}
                </Menu>
            </Sider>
        )
    }
}